<template>
	<view v-if="info" class="wraps">
		<view class="lists">
			<view class="item">

				<view class="left">
					<view class="">
						名称：{{info.card.cardName}}
					</view>
					<view class="">
						卡号：{{info.card.cardNo}}
					</view>
					<view class="">
						截止时间：{{info.card.peisonEndTime && info.card.peisonEndTime.split(' ')[0]}}
					</view>
					<view class="">
						<!-- 可发货： -->
						{{info.finish}}
					</view>
				</view>
				<view class="right">
					<image class="img" :src="info.card.cardImg" mode=""></image>

				</view>
			</view>
		</view>

		<view class="title1">
			您的发货计划
			<div class="deco"></div>
		</view>

		<view class="boxes">
			<!-- 正常的 -->
			<view class="wrapCont" v-for="(item,index) in curList " @click="look(item)">


				<view class="item" :class="[getclass(item)]">
					
					
					
					<image v-if="item.fahuo_state=='已完成'" class="tag" src="../../../static/aidex/images/ywc.png"
						mode=""></image>
					<image v-else-if="item.fahuo_state=='发货中'" class="tag" src="../../../static/aidex/images/fhz.png"
						mode=""></image>
					<image v-else-if="item.fahuo_state=='已发货'" class="tag" src="../../../static/aidex/images/yfh.png"
						mode=""></image>
						
						<div v-else-if="item.fahuo_state=='待发货'">
							
							
							<image v-if="info.card.planState=='已暂停'"  class="tag" src="../../../static/aidex/images/yzt.png"
								mode=""></image>
							<image v-else  class="tag" src="../../../static/aidex/images/dfh.png"
								mode=""></image>
						</div>
					
					<view class="qs">
						{{item.plan_name}}
					</view>
					<view class="data">


						{{item.fahuo_time && item.fahuo_time.split(' ')[0].replace(/-/g, '/')}}
						<!-- <text>{{getDayOfWeek(item.fahuo_time && item.fahuo_time.split(' ')[0])}}</text> -->
					</view>
					<view class="data" style="margin-top: 2rpx;">
						<text>{{getDayOfWeek(item.fahuo_time && item.fahuo_time.split(' ')[0])}}</text>
					</view>
					<view class="food">
						<text>{{item.goods}}</text>
					</view>

					<view class="look" v-if="['已完成','已发货','发货中'].includes(item.fahuo_state)">
						查看物流
					</view>
					<view class="look" v-if="['待发货'].includes(item.fahuo_state)">
						修改计划
					</view>
				</view>

			</view>
			<!-- 已完成 -->
			<view v-if="info.card.planState=='已暂停'" class="item btns" @click="open">
				<image src="../../../static/aidex/images/begin.png" mode=""></image>
				<view class="wz">
					恢复发货
				</view>
			</view>
			<view v-else class="item btns" @click="stop">
				<image src="../../../static/aidex/images/stop.png" mode=""></image>
				<view class="wz">
					暂停发货
				</view>
			</view>
		</view>

		<!-- <view v-if="list.length>=6">
			<view v-if="flag" class="lookmore" @click="more">
				展开更多计划 <u-icon name="arrow-down-fill" color="#D39566" size="31"></u-icon>
			</view>
			<view v-else class="lookmore" @click="jianshao">
				收起更多计划 <u-icon name="arrow-up-fill" color="#D39566" size="31"></u-icon>
			</view>
		</view> -->

		<view class="tips" style="margin-top: 20rpx;">
			<view class="tit">
				温馨说明：
			</view>
			<view class="word">
				<view>
					1、若提交的提交信息不做更改或遇到突发情况，则按规定时间发货，期间提货时间与收货地址可自行更改调整；调整请在发货前至少一天。
				</view>
				<view>2、快递公司和发货地区不可指定，新疆、西藏、青海、海南和港澳台不发货。</view>
				<view>3、发货时间位提货日期后48小时内发货，提货日期≠发货日期≠到货日期。</view>
				<view>4、更多可咨询客服，服务时间：周一到周日（9:00-22:00）</view>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{}, {}, {}, {}, {}, {}, {}],
				curList: [],
				flag: true,
				info: null,
				cardId: ''
			}
		},
		onLoad(e) {
			this.cardId = e.cardId


		},
		onShow() {
			this.getList()
		},
		methods: {

			// 待发货|发货中|已发货|已完成
			getclass(item) {
				console.log(item, 5555);
				if (item.fahuo_state == '已完成') {
					return 'over'
				} else if (['发货中'].includes(item.fahuo_state)) {
					return 'doing'
				}
			},
			open(flag) {

				this.$u.api.startOrStopFahuo({
						cardId: this.cardId
					})
					.then((res) => {
						
						if(res.code==0){
							if(flag=='stop'){
								uni.showToast({
									icon:'success',
									title:'暂停成功'
								})
								// this.$u.toast('暂停成功');
							}else{
								uni.showToast({
									icon:'success',
									title:'恢复成功'
								})
								// this.$u.toast('开启成功');
							}
							
						}
						
						
						
						this.getList()
					});
			},
			stop() {
				this.open('stop')
			},


			getList() {
				this.$u.api.cardPlanList({
						cardId: this.cardId
					})
					.then((res) => {

						if (res.code == 0) {

							this.info = res
							this.list = res.list;
							console.log(this.list, 444444444);
							this.curList = this.list
							// if (this.list.length >= 6) {
							// 	this.curList = this.list.slice(0, 6)
							// } else {
							// 	this.curList = this.list
							// }

						} else {
							this.$u.toast(res.msg); // 通知验证码组件内部开始倒计时
							console.log("请求数据失败");
						}
					});

			},

			getDayOfWeek(dateString) {
				// 创建一个 Date 对象
				const date = new Date(dateString);

				// 获取星期几的数字表示（0 表示星期日，1 表示星期一，...，6 表示星期六）
				const dayOfWeek = date.getDay();

				// 定义一个星期几的数组
				const days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];

				// 返回对应的星期几
				return days[dayOfWeek];
			},

			look(item) {
				if (['已完成', '已发货', '发货中'].includes(item.fahuo_state)) {
					uni.navigateTo({
						url: "/pages/sys/msg/see?id="+item.id+'&cardId='+this.cardId+"&status="+item.fahuo_state
					})
				} else if (['待发货'].includes(item.fahuo_state)) {
					this.$u.vuex("vuex_checkedAddr", null);
					let that = this;
					uni.navigateTo({
						url: "/pages/sys/msg/edit?planId=" + item.id + '&cardId=' + item.card_id,
						// success(res) {
						// 	res.eventChannel.emit('milksendDate',that.info)
						// }
					})

				}
			},



			more() {
				this.curList = this.list
				this.flag = !this.flag
			},
			jianshao() {
				this.curList = this.list.slice(0, 6)
				this.flag = !this.flag
			}
		}
	}
</script>

<style scoped>
	page {
		background: #005850;
		padding: 48rpx 35rpx;
	}
</style>

<style scoped lang="scss">
	.title1 {
		text-align: center;
		font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
		font-weight: bold;
		font-size: 36rpx;
		color: #005850;
		line-height: 1rpx;

		.deco {
			margin: 0 auto;
			width: 212rpx;
			height: 7rpx;
			background: rgba(211, 149, 102, 0.8);
			border-radius: 6rpx;
			margin-top: 6px;
		}
	}

	.sub {
		margin: 50rpx 0 0;
		height: 88rpx;
		font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
		font-weight: bold;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 42rpx;
	}

	.wraps {
		background: #F7F8F3;
		border-radius: 27rpx;
		padding: 53rpx 0;
	}

	.tips {
		padding: 0 46rpx;

		.tit {
			font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
			font-weight: normal;
			font-size: 28rpx;
			color: #024546;
			line-height: 38rpx;
			margin-bottom: 14rpx;
		}

		.word {
			font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
			font-weight: normal;
			font-size: 22rpx;
			color: #024546;
			line-height: 31rpx;
		}
	}

	.lookmore {
		margin: 0 0 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
		font-weight: bold;
		font-size: 36rpx;
		color: #005850;
		line-height: 50rpx;
	}

	.boxes {
		padding: 28rpx 39rpx 0;
		display: flex;
		flex-wrap: wrap;

		.wrapCont {
			overflow: hidden;
			width: 187rpx;

			border-radius: 8rpx;
			margin-right: 20rpx;
			margin-bottom: 20rpx;

			&:nth-child(3n) {
				margin-right: 0;
			}
		}

		.item {

			background: #005850;
			position: relative;
			width: 187rpx;
			height: 230rpx;
			border-radius: 8rpx;

			padding: 18rpx 16rpx 16rpx;

			.tag {
				position: absolute;
				width: 85rpx;
				height: 79rpx;
				right: 0rpx;
				top: 0rpx;

			}


			.qs {
				font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
				font-weight: normal;
				font-size: 22rpx;
				color: #F7F8F3;
				line-height: 30rpx;
			}

			.data {
				margin: 16rpx 0 2rpx;
				font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
				font-weight: normal;
				font-size: 20rpx;
				color: #F7F8F3;
				line-height: 33rpx;

				text {
					// margin-left: 10rpx;
				}
			}

			.food {
				font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
				font-weight: normal;
				font-size: 20rpx;
				color: #F7F8F3;
				// line-height: 27rpx;
				-webkit-line-clamp: 1; // 设置两行文字溢出
				display: -webkit-box;
				/** 对象作为伸缩盒子模型显示 **/
				-webkit-box-orient: vertical;
				/** 设置或检索伸缩盒对象的子元素的排列方式 **/
				overflow: hidden;
				/** 隐藏超出的内容 **/

			}

			.look {
				font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
				font-weight: normal;
				font-size: 18rpx;
				color: #F7F8F3;
				padding: 3rpx 0 4rpx;
				border-radius: 20rpx;
				border: 1rpx solid #F7F8F3;
				text-align: center;
				margin-top: 10rpx;
			}

			&.doing {
				background: #D39566;
			}

			&.over {
				background: #E5E5E5;

				.food,
				.data,
				.qs,
				.look {
					color: #4A4A4A;
				}

				.look {
					border: 1rpx solid #4A4A4A;
				}
			}

			&.btns {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				background: #E5E5E5;
				border-radius: 8rpx;

				image {
					width: 55rpx;
					height: 55rpx;
				}

				.wz {
					margin-top: 12rpx;
					font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
					font-weight: normal;
					font-size: 22rpx;
					color: #4A4A4A;
					line-height: 30rpx;
				}
			}

		}

	}

	.lists {
		padding: 0 58rpx;

		.item {
			position: relative;
			height: 270rpx;
			background: url('../../../static/aidex/images/bg.png') no-repeat;
			background-size: cover;
			border-radius: 14rpx;
			margin-bottom: 55rpx;
			display: flex;
			justify-content: space-between;

			.status {
				position: absolute;
				right: 0;
				padding: 2rpx 10rpx 3rpx;
				background: #7F7F7F;
				border-radius: 18rpx 0rpx 0rpx 18rpx;
				font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
				font-weight: bold;
				font-size: 22rpx;
				color: #FFFFFF;
				line-height: 30rpx;
				top: 25rpx;
				z-index: 5;

				&.doing {
					background: #009585 !important;
				}

				&.over {
					background: #F59A23 !important;
				}
			}

			.left {
				font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
				font-weight: normal;
				font-size: 20rpx;
				color: #FFFFFF;
				padding: 125rpx 0 0 30rpx;
			}

			.right {
				padding-top: 51rpx;
				margin-right: 30rpx;

				.img {
					width: 212rpx;
					height: 187rpx;

				}

				.dz {
					font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
					font-weight: normal;
					font-size: 20rpx;
					color: #FFFFFF;
					line-height: 27rpx;
					padding: 4rpx 22rpx;
					background: linear-gradient(270deg, #CB9A71 0%, #E6C9A2 100%);
					border-radius: 18rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}
</style>
